<template>
  <div>
    <div class="telnum">
        <van-cell-group border>
        <van-field v-model="tel" label="手机号" placeholder="请输入手机号" autofocus/>
        </van-cell-group>
    </div>
     <div class="register">
        <van-button round type="danger" size="large" :disabled='flag' @click="next">获取验证码</van-button>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
Vue.use(Dialog);

import { doCheckPhone } from '../../api/user'
export default {
    data () {
        return {
            tel:'',
            // flag:true,  //这个用计算属性写最好，因为要用的属性不存在，要通过已有属性计算得来
        }
    },
    computed: {
      flag() {
        // 满足输入的内容符合手机号的规则
        if(/^1[3456789]\d{9}$/.test(this.tel)) {
          return false;   //符合规则，按钮显示红色，表示可用
        } else {
          return true;    //不符合规则，按钮是淡红色，表示禁用
        }
      }
    },
    methods: {
      next() {
        //验证手机号是否可以注册（是否已经注册过）
        doCheckPhone({tel:this.tel}).then(res => {
          console.log(res.data.code);
          switch (res.data.code) {
            case '10005':
              Dialog.confirm({
                message: '该手机号已注册，请去登录吧',
              })
                .then(() => {
                  this.$router.go(-1)
                })
                .catch(() => {
                  // on cancel
                });
              break;
            case '200':
              localStorage.setItem('tel',this.tel)
              this.$router.push('/register/two')
              break;
            default:
              break;
          }
        })
      }
    }
}
</script>

<style scoped>
.register {
  width: 75%;
  margin: 30px auto;
}
</style>